<template>
  <div class="pre-layout">
    <grid-layout
      :layout="layout"
      :col-num="colNum"
      :row-height="10"
      :is-draggable="false"
      :is-resizable="false"
      :vertical-compact="false"
      :use-css-transforms="false"
      :responsive="false"
      style="height: fit-content;"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :static="false"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :style="item.level === 'block' ? {...blockStyle, transform: 'none'}: {}"
        :class="'vue-' + item.level + '-grid'"
        style="height: fit-content; position:normal;"
      >
        <div v-if="item.level === 'block'" :class="'block-text'">
          <span class="node-info" v-if="!!item.title">
            {{ item.title }}
          </span>
          <r-grid-layout-pre
            :layout.sync="item.layout"
            :colNum="colNum"
            :value.sync="value"
          />
        </div>
        <div v-else :class="'item-text'">
          <form-create-proxy
            :props="item.props"
            :value.sync="value[item.props.field]"
          />
        </div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout";
import FormCreateProxy from './FormCreateProxy.vue';

export default {
  components: {
    GridLayout: GridLayout,
    GridItem: GridItem,
    FormCreateProxy,
    // RGridLayoutCopy,
  },
  data() {
    return {
      currentBlock: null,
      currentItem: null,
      blockStyle:{
        height: 'fit-content',
        position: 'normal',
        transform: null,
        marginLeft: 'auto',
        marginRight: 'auto'
      }
    };
  },
  props: {
    layout: Array,
    value: {
      type: Object,
      default() {
        return {};
      },
    },
    colNum: {
      type: Number,
      default: 24,
    },
  },
  methods: {},
};
</script>

<style>
.current-block {
  border: solid 1px rgb(12, 253, 72);
}
.block-text {
  /* border: solid 1px black; */
  /* border: solid 1px rgb(255, 255, 255); */
  /* box-shadow: 0 0 4px 2px #00000080; */
  /* border-radius: 5px; */
  background: #ffffffeb;
  /* transition: border 0.5s; */
}

.pre-layout .vue-grid-layout {
  height: fit-content;
}
.pre-layout .item-text {
  margin-top: 5px;
  text-align: unset;
  padding: 3px;
  margin: auto;
}
.pre-layout .vue-grid-layout :first-child[class="vue-item-grid"] {
  margin-top: 15px;
}
.pre-layout .node-info {
  margin-top: 5px;
  margin-left: 10px;
}
.pre-layout :last-child[class="item-text"] {
  margin-bottom: 5px;
}
.pre-layout .vue-block-grid {
  margin-top: 30px;
}
</style>